<template>
  <div class="dashboard-container-content-left-part1">
    <div>
      <div class="dashboard-container-content-left-part1-title">
        {{vaultApplyCount}}
        <span class="dashboard-container-content-left-part1-title-unit"
          >条</span
        >
      </div>
      <div class="dashboard-container-content-left-part1-title-text">
        金库申请总数
      </div>
    </div>
    <div>
      <div class="dashboard-container-content-left-part1-title">
        {{invalidateApply}}
        <span class="dashboard-container-content-left-part1-title-unit"
          >条</span
        >
      </div>
      <div class="dashboard-container-content-left-part1-title-text">
        异常审批
      </div>
    </div>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex';

  export default {
  name: "ContentRightPart1",
  data() {
    return {
      // logCount: 0,
      vaultApplyCount: 0,
      // invalidateLog: 0,
      invalidateApply: 8,
    };
  },
  computed: {
    ...mapGetters([
      'vaultApplyList'
      // 'logAuditList'
    ])
  },
  watch: {
    // logAuditList: {
    //   handler() {
    //     this.initData();
    //   },
    //   deep: true
    // },
    vaultApplyList: {
      handler() {
        this.initData();
      },
      deep: true
    },
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      // this.logCount = this.logAuditList.length;
      this.vaultApplyCount = this.vaultApplyList.length;
      // let invalidateAccount = 0;
      // accountData.list.forEach(data => {
      //   if(data.k6 == '外部人员' && data.k15 == '') {
      //     invalidateAccount++;
      //   }
      // });
      // this.invalidateAccount = invalidateAccount;
    },
    // async initData() {
    //   const logAuditList = await this.$store.dispatch('logAudit/getList');
    //   this.logCount = logAuditList.length;
    //   // let invalidateAccount = 0;
    //   // accountData.list.forEach(data => {
    //   //   if(data.k6 == '外部人员' && data.k15 == '') {
    //   //     invalidateAccount++;
    //   //   }
    //   // });
    //   // this.invalidateAccount = invalidateAccount;
    // }
  }
};
</script>
<style lang="scss" scoped>
.dashboard-container-content-left-part1 {
  width: 479px;
  height: 107px;
  background: url("../../../assets/images/box01@1x.png") no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;

  &-title {
    color: #f5bc32;
    font-family: DIN Condensed;
    font-weight: bold;
    font-size: 36px;
    line-height: normal;
    letter-spacing: 0px;
    text-align: left;

    &-unit {
      color: #ffffffd8;
      font-family: FZZongYi-M05S;
      font-weight: regular;
      font-size: 12px;
      line-height: 10px;
      letter-spacing: 0px;
      text-align: left;
    }
  }

  &-title-text {
    color: #6ddcff;
    font-family: FZZongYi-M05S;
    font-weight: regular;
    font-size: 15px;
    line-height: 12px;
    letter-spacing: 0px;
    text-align: left;
  }
}
</style>
